// edit screen .

// BEGIN!!
$(document).ready(function(){
$("#handle").css({ "left" : "-50px" }).data('open', false);
$("#container").css({ "left" : '-130px' });
$(".item").create_item();

store();

$("#canvas").droppable({ tolerance: "touch" , accept: ".item", drop: function(event, ui){
	var $this = $(this).offset();// position of canvas
	var $that = ui.offset; // position of item
	var $item = ui.draggable; // get the item
	var $id = $item.attr('id');
	var $top = (($that.top-$this.top)/$(this).height())*100; // position of item relative to canvas.
	var $left = (($that.left-$this.left)/$(this).width())*100;


	if(!$item_list[$id]){ // Close container gracefully once item is removed and register new item.
		$("#container").animate({ "left" : '-130px' },400);
		$("#handle").animate({ "left" : "-50px" },300).data('open', false);
		// Set the item in place and register it.
		var $wid = ($item.width()/$(this).width())*100;
		var $hgt = ($item.height()/$(this).height())*100;
		$item.appendTo('body').css({ 'position' : 'absolute' ,  'top' : $that.top, 'left' : $that.left });
		$item_list[$id] = {left: $left, top: $top, width: $wid, height: $hgt};
		}
	$item.draggable( "option", "revert", false );
	$item_list[$id].left = $left;
	$item_list[$id].top = $top;
	store();
}});


$("#handle").click(function(){
	var $state = $(this).data('open');
	if($state){
		// we are closing
		$(this).animate({ "left" : "-50px" },300).data('open', false);
		$("#container").css({ "left" : '0px' }).delay(100).animate({ "left" : '-130px' },400);
	}
	else {
		// we are opening
		$(this).animate({ "left" : "0px" },300).data('open', true);
		var $name = get_temp_name();
		$("#container").html($item).children().attr('id', $name ).append('<center>'+$name+'</center>').create_item();
		$("#container").css({ "left" : '-130px' }).delay(100).animate({ "left" : "0px" }, 500);
	}
});


})